window.onload = function () {
    //获取页面元素
    let video_ = document.querySelector('video');//视频标签
    let play_ = document.querySelector('.play');//播放键
    let paused_ = document.querySelector('.paused');//暂停键
    let current_time = document.querySelector('.currentTime')//当前时间
    let total_time = document.querySelector('.duration')//总的播放时间
    let full_screen = document.querySelector('.full_screen')//全屏
    let bar_ = document.querySelector('.bar')//进度条按钮
    let progress_bar = document.querySelector('.progress_bar');
    let line_ = document.querySelector('.green');
    let mask = document.querySelector('.mask');
    let volume_ = document.querySelector('.volume')//音量按键部分
    let volume_mask = document.querySelector('.volume_mask')
    let volume_btn01 = document.querySelector('.volume_btn01')
    let volume_btn02 = document.querySelector('.volume_btn02')
    let jingyin = document.querySelector('.jingyin')
    video_.addEventListener('canplay', function () {
        //点击播放
        play_.addEventListener('click', function () {
            playShow()
        })
        //点击暂停
        paused_.addEventListener('click', function () {
            pauseShow()
        })
        //当前播放时间写入页面
        video_.addEventListener('timeupdate', function () {
            //判断暂停播放状态
            if (this.paused) {
                $('.sp1').show().siblings('span').hide()

            } else if (!this.paused) {
                $('.sp1').hide()
                // $('.sp2').show().siblings('span').hide()
            }
            // console.log(formatTime(video_.currentTime));
            current_time.innerHTML = formatTime(video_.currentTime)
            //播放时进度条移动
            bar_.style.left = (video_.currentTime / video_.duration) * 100 - 1 + '%';
            line_.style.width = (video_.currentTime / video_.duration) * 100 + 1 + '%';
        })

        //总的播放时间
        total_time.innerHTML = formatTime(video_.duration);
        //全屏
        full_screen.addEventListener('click', function () {
            video_.webkitRequestFullScreen();
        })


        //音量部分
        volume_btn01.addEventListener('click', function () {
            volume_btn01.style.display = 'none';
            volume_btn02.style.display = 'inline-block';

            // console.log(video_.volume);
        })
        volume_btn02.addEventListener('click', function () {
            volume_btn02.style.display = 'none';
            volume_btn01.style.display = 'inline-block';
            volume_.style.display = 'block';
        })
        volume_.addEventListener('click', getVolume)
        function getVolume(e) {
            e = e || window.event;
            e.stopPropagation()
            // console.log(this.offsetHeight);//60
            // console.log(e.offsetY/this.offsetHeight);
            if (e.offsetY / this.offsetHeight < 0.1) {
                video_.muted = true;
                volume_mask.style.height = '0'
                jingyin.style.display = 'inline-block';
                volume_btn02.style.display = 'none';
                volume_btn01.style.display = 'none';
            } else {
                // console.log(e.offsetY / this.offsetHeight);
                video_.volume = e.offsetY / this.offsetHeight;
                volume_mask.style.height = (e.offsetY / this.offsetHeight) * 100 + '%'
            }
        }
        jingyin.addEventListener('click', function () {
            video_.muted = false;
            jingyin.style.display = 'none';
            volume_btn02.style.display = 'inline-block';
            volume_btn01.style.display = 'none';

        })
        //点击更多
        $('.more').click(function () {
            console.log(666);
            $(this).siblings('.list').fadeIn()
        })
        $('.list').mouseleave(function () {
            $(this).fadeOut()
        })
        //倍数播放
        $('.list li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
        // 0.5倍
        $('.speed1').click(function () {
            video_.playbackRate = 0.5;
        })
        // 1倍
        $('.speed2').click(function () {
            video_.playbackRate = 1;
        })
        // 1.5倍
        $('.speed3').click(function () {
            video_.playbackRate = 1.5;
        })
        // 2倍
        $('.speed4').click(function () {
            video_.playbackRate = 2;
        })

        //点击中间按钮播放
        $('.sp1').click(function(){
            video_.play();
        })
    })
    //拖曳bar
    let box = document.querySelector('.container')
    bar_.addEventListener('mousedown', function () {
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', function (e) {
            document.removeEventListener('mousemove', move);
        });
    })
    // 点击进度条
    mask.addEventListener('click', function (e) {
        // console.log(this.offsetX);
        // console.log(e.offsetX / this.offsetWidth);  
        video_.currentTime = (e.offsetX / this.offsetWidth) * video_.duration;
        playShow();
    })
    //拖拽调用的函数
    function move(e) {
        barX = e.pageX - box.offsetLeft - 15;
        barMax = mask.offsetWidth;
        // 进度条的偏移量限制条件
        barX = barX <= 0 ? 0 : barX;
        barX = barX >= barMax ? barMax : barX;
        // console.log((barX/barMax)*video_.duration);
        video_.currentTime = (barX / barMax) * video_.duration;
        bar_.style.left = (barX / barMax) * 100 + '%';
        line_.style.width = (video_.currentTime / video_.duration) * 100 + 1 + '%';

        //清除拖动 --- 防止鼠标已经弹起是还在拖动
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
    //按下空格键播放暂停
    window.addEventListener('keyup', function (e) {
        e = e || window.event;
        if (e.keyCode == 32 && video_.paused) {
            playShow();
        } else if (!video_.paused && e.keyCode == 32) {
            pauseShow()
        }
    })

    //格式化时间
    function formatTime(time) {
        let m = Math.floor(time / 60);
        m < 10 ? m = '0' + m : m;
        let s = Math.floor(time % 60);
        s < 10 ? s = '0' + s : s;
        return m + ':' + s;
    }
    //播放显示
    function playShow() {
        video_.play();
        play_.style.display = 'none';
        paused_.style.display = 'inline-block'
    }
    //暂停显示
    function pauseShow() {
        video_.pause();
        paused_.style.display = 'none';
        play_.style.display = 'inline-block'
    }
    //阻止文本选中
    window.onselectstart = function (e) {
        e = e || window.event;
        e.preventDefault();
    };
    //悬浮显示控件
    $('.container').mouseenter(function(){
        $('.control').fadeIn()
    })
    $('.container').mouseleave(function(){
        $('.control').fadeOut()
    })
}